<!--
 * @Author: tangqihui tangqihui@yuan-info.com
 * @Date: 2023-09-18 14:30:09
 * @LastEditors: tangqihui tangqihui@yuan-info.com
 * @LastEditTime: 2023-09-18 17:19:21
 * @FilePath: /御安项目/火影资管/yuan-asset-module-browser/src/views/riskDetect/riskMangent/riskList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="risklist">
    <YaSearch
      :formData="formData"
      :labelWidth="'80px'"
      :formColumns="formColumns"
      @search="search"
      @reset="resetForm"
    ></YaSearch>
    <div class="risklist-content">
      <div class="risklist-left">
        <div class="risklist-left-heard">
          <img src="../../../assets/image/risk-1.png" alt="" />
          <div>资产总数：<span>159</span></div>
        </div>
        <div class="risklist-left-warp">
          <div class="risklist-left-content" v-for="item in 20">
            <div class="ip">192.168.1.1</div>
            <div class="detail">
              <div class="detail-content">
                网络域<span class="ellipsis"> | 研发部门</span>
              </div>
              <div class="add">纳管</div>
            </div>
            <div class="tip">
              <img src="../../../assets/image/risk-2.png" alt="" />
            </div>
          </div>
          <!-- <div class="left-noLength">
            <YaEmpty></YaEmpty>
          </div> -->
        </div>
      </div>
      <div class="risklist-right">
        <YaTabs
          :tabs="tabs"
          v-model="currentName"
          @tabChange="tabChange"
        ></YaTabs>
        <div class="risklist-right-warp">
          <div
            class="risklist-right-content"
            v-if="currentName == 4"
            v-for="item in 20"
          >
            <div class="risklist-right-content-right flex-x-st ml-0">
              <div class="img2">
                <img src="../../../assets/image/risk-7.png" alt="" />
              </div>
              <div class="type ml-12">ssh</div>
              <div class="line">|</div>
              <div>
                <span>用户名：</span>
                1233333
              </div>
              <div class="line">|</div>
              <div>
                <span>密码：</span>
                1233333
              </div>
              <div class="line">|</div>
              <div>
                <span>发现时间：</span>
                1233333
              </div>
            </div>
          </div>
          <div class="risklist-right-content" v-else v-for="item in 20">
            <div class="risklist-right-content-left">
              <img class="img1" src="../../../assets/image/risk-3.png" alt="" />
            </div>
            <div class="risklist-right-content-right">
              <div>
                <div class="name ellipsis">nacos信息泄露漏洞（CVE-2022）</div>
                <div class="flex-st">
                  <div class="type">信息泄露</div>
                  <div>
                    <span class="line">|</span>
                    <span>发现时间：</span>2023-09-18 19:60:60
                  </div>
                </div>
              </div>
              <div class="detail">查看详情</div>
            </div>
          </div>
          <div class="page-index">
            <YaPagination
              :page-sizes="[20, 30, 40, 50, 100]"
              :currentPage="page"
              :pageSize="pageSize"
              @sizeChange="handlePageSizeChange"
              @currentChange="handlePageChange"
              small
              :total="total"
            >
            </YaPagination>
          </div>
         
          <!-- <div class="right-noLength">
            <YaEmpty></YaEmpty>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  Ref,
  getCurrentInstance,
} from 'vue';
import type { FormInstance, FormRules, ElScrollbar } from 'element-plus';

const formData = ref({});
const formColumns = reactive([
  {
    key: 'target',
    type: 'input',
    label: '资产地址',
    clearable: true,
  },
  {
    key: 'target',
    type: 'select',
    label: '网络域',
    clearable: true,
  },
  {
    key: 'target',
    type: 'input',
    label: '漏洞名称',
    clearable: true,
  },
  {
    key: 'target',
    type: 'select',
    label: '风险等级',
    clearable: true,
  },
  {
    key: 'time',
    type: 'daterange',
    label: '发现时间',
    valueFormat: 'YYYY-MM-DD',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    clearable: true,
  },
]);
/**
 * @description 查询
 */
const search = () => {};
/**
 * @description 重置
 */
const resetForm = (formEl: FormInstance | undefined) => {
  // if (tabCurrentValue.value) {
  //   getTablePage("init");
  // } else {
  //   getAppPageList("init");
  // }
  if (!formEl) return;
  formEl.resetFields();
};
const tabs = ref([
  { title: '全部（118）', value: 1 },
  { title: '主机漏洞（118）', value: 2 },
  { title: 'web漏洞（118）', value: 3 },
  { title: '弱口令（118）', value: 4 },
  { title: '异常风险（118）', value: 5 },
  { title: '基线风险（118）', value: 6 },
  { title: 'PoC漏洞（118）', value: 7 },
]);
const currentName = ref(4);
const tabChange = (name) => {
  currentName.value = name;
  console.log('tabChange', name);
};

const page = ref(1);
const pageSize = ref(20);
const total = ref(10);

/**
 * @description 分页
 */
 const handlePageSizeChange = (val: number) => {
  page.value = 1;
  pageSize.value = val;
  backTop();
  // getTablePage();
};
/**
 * @description 分页
 */
const handlePageChange = (val: number) => {
  page.value = val;
  backTop();
  // getTablePage();
};
/**
 * @description 返回顶部
 */
 const backTop = () => {
  document.getElementsByClassName('risklist-right-warp')[0].scrollTop = 0;
};
</script>

<style lang="scss" scoped>
.risklist {
  padding-top: 16px;
  color: var(--el-text-color-primary);
  font-size: 14px;
  .risklist-content {
    border: var(--el-border);
    height: calc(100% - 80px);
    border-radius: 6px;
    margin: 0 16px;
    display: flex;
    .risklist-left {
      width: 222px;
      border-right: var(--el-border);
      height: 100%;
      .risklist-left-heard {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 11px;
        padding-bottom: 8px;
        border-bottom: var(--el-border);
        span {
          color: var(--el-color-primary);
        }
        img {
          width: 13px;
          height: 14px;
          margin-right: 6px;
        }
      }
      .risklist-left-warp {
        overflow-y: auto;
        height: calc(100% - 40px);
        .left-noLength {
          position: relative;
          top: 35%;
          ::v-deep .ya-table-empty-slot .ya-table-empty {
            width: 220px;
          }
        }
      }
      .risklist-left-content {
        border: var(--el-border);
        margin: 6px;
        border-radius: 6px;
        padding: 12px;
        position: relative;

        .detail {
          color: var(--el-text-color-placeholder);
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          margin-top: 2px;
          .detail-content {
            display: flex;
          }
          span {
            display: inline-block;
            width: 110px;
          }
          .add {
            color: var(--el-color-primary);
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .tip {
          position: absolute;
          top: 0;
          right: 0;
          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
    .risklist-right {
      flex: 1;
      width: 60%;
      .right-noLength {
        position: relative;
        top: 35%;
      }
      .risklist-right-warp {
        overflow-y: auto;
        height: calc(100% - 40px);
      }
      .risklist-right-content {
        margin: 16px;
        padding-bottom: 16px;
        border-bottom: var(--el-border);
        display: flex;
        .risklist-right-content-left {
          width: 51px;
          height: 51px;
          box-sizing: border-box;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .risklist-right-content-right {
          flex: 1;
          margin-left: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img2 {
            width: 22px;
            height: 22px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .ml-12 {
            margin-left: 12px;
          }
          .name {
            margin-bottom: 12px;
            width: 600px;
          }
          span {
            color: var(--el-text-color-placeholder);
          }
          .line {
            margin: 0 14px;
            color: var(--el-text-color-placeholder);
          }
          .type {
            background: var(--el-color-warning-light-9);
            font-size: 12px;
            color: var(--el-color-warning);
            padding: 2px 12px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-radius: 4px;
          }
          .flex-st {
            display: flex;
          }
          .detail {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
        .flex-x-st {
          justify-content: flex-start;
        }
        .ml-0 {
          margin-left: 0;
        }
      }
    }
  }
}
::v-deep .el-tabs__nav {
  padding-left: 16px;
  padding-right: 16px;
}
::v-deep .el-tabs__item {
  color: var(--el-text-color-placeholder);
  font-weight: normal;
}
::v-deep .el-tabs__item.is-active {
  color: var(--el-color-primary) !important;
}
.page-index {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;

}
</style>
